<template>
  <div style="background-color:#fff;padding:10px;">
    <section>
      <el-row class="form-container">
        <el-col :span="4" class="form-item" v-for="questionnaire of questionnaireList" :key="questionnaire.id" @click.native.self="editQuestionnaire(questionnaire.id)">
          <p style="width:100%;padding: 3px 10px;box-sizing: border-box" @click="editQuestionnaire(questionnaire.id)">
            <b style="color:crimson;margin-bottom: 5px;">{{questionnaire.title}}</b>
            <br>
            {{questionnaire.type.name}}
            <br>
          </p>
        </el-col>
        <el-col :span="4" class="form-item add-item" @click.native="createQuestionnaire">
          <icon name="plus" :scale="plusIcon"></icon>
        </el-col>
      </el-row>
    </section>
    <el-dialog v-if="typeDialog" title="添加问卷" :visible.sync="typeDialog">
      <el-form label-width="100px">
        <el-form-item label="拷贝">
          <el-select v-model="selQuestion">
            <el-option v-for="item of questionnaireList" :key="item.id" :label="item.title" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="标题">
          <el-input type="text" v-model="newQuestionnaire.title"></el-input>
        </el-form-item>
        <el-form-item label="题目类型">
          <el-select v-model="newQuestionnaire.type">
            <el-option v-for="type of questionTypes" :key="type.id" :value="type.id" :label="type.name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item align="right">
          <el-button @click.native="btnCancel">取消</el-button>
          <el-button @click.native="btnCreate" type="primary">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import errHandler from '@/assets/errHandler'
  export default {
    name: "qa-edit-manage",
    computed:{
      ...mapGetters(['userInfo'])
    },
    data(){
      return {
        plusIcon:3,
        typeDialog:false,
        questionnaireList: [],
        newQuestionnaire:null,
        selQuestion:null,
        questionTypes:[],
        rtList:[],
      }
    },
    created(){
      //获取问卷类型列表
      this.fetch({name:'getQuestionnaireList'})
        .then((res)=>{
        if(res.errCode){
          this.$message({type:'error',message:res.errMsg});
        }else{
          this.questionnaireList = res
        }
      }).catch((err)=>{
        console.log(err)
        this.$message({type:'error',message:"服务器错误"})
      })
    },
    methods:{
      ...mapActions({
        fetch:'fetch'
      }),
      getQaTypeList(){
        this.fetch({name:"getQaTypeList"})
          .then(res=>{
            console.log(res)
            this.questionTypes=res
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      createQuestionnaire(){
        this.newQuestionnaire = {title:'',type:''};
        this.getQaTypeList()
        this.typeDialog = true;
      },
      editQuestionnaire(id){
        this.$router.push('/qa/edit/'+id);
      },
      btnCreate(){
        //创建问卷
        if(!this.newQuestionnaire.title){
          this.$message({type:'error',message:'标题不能为空'});
        }else if(!this.newQuestionnaire.type){
          this.$message({type:'error',message:'请选择题目类型'});
        }else{
          let params = {title: this.newQuestionnaire.title,typeId: this.newQuestionnaire.type}
          if(this.newQuestionnaire.type === 2){
            params.isTactics = true
          }
          if(this.selQuestion){//拷贝题目 这里的selQuestion 就是id号 copyQuestionnaire
            this.fetch({name:'copyQuestionnaire',data:{
                id:this.selQuestion,
                ...params,
              }}).then(res=>{
              if(!res.errCode){
                this.$message({type:'success',message:'拷贝问卷成功'});
                this.$router.push('/qa/edit/'+res.id);
              }else{
                this.$message({type:'error',message:res.errMsg});
              }
            }).catch(error=>{
              console.log(error);
              this.$message({type:'error',message:'服务器出错'});
            })
          }else{
            console.log(params)
            this.fetch({name:"createQuestionnaire",data:{...params}})
              .then(res=>{
                if(!res.errCode){
                  this.$message({type:'success',message:'新建问卷成功'});
                  this.$router.push('/qa/edit/'+res.id);
                }else{
                  this.$message({type:'error',message:res.errMsg});
                }
              })
              .catch(err=>{
                console.log(err)
                errHandler.handle(this,err)
              })
          }
        }
      },
      btnCancel(){
        this.typeDialog = false;
        this.newQuestionnaire = {title:'',type:''};
      }
    }
  }
</script>

<style lang="scss">
  .form-container {
    .form-item {
      box-sizing: border-box;
      position: relative;
      width: 120px !important;
      height: 140px;
      border: 1px solid darkgrey;
      cursor: pointer;
      margin: 5px;
      .run-questionnaire {
        display: none;
        position: absolute;
        bottom: 10px;
        right: 10px;
      }

      &:hover {
        border: 1px solid #8391a5;
        transition: all .2s ease;
        box-shadow: grey 0 0 6px 0;
        .run-questionnaire {
          display: block;
        }
      }
      &.add-item {
        border: 1px dashed darkgrey;
        .fa-icon {
          fill: darkgrey;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          transition: all .2s ease;
        }
        &:hover {
          border: 1px solid #8391a5;
          .fa-icon {
            fill: #8391a5;
          }
        }

      }
    }
  }
</style>
